<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      body {
        margin: 0 auto;
        padding: 0px;
        font-size: 12px;
        background: url(images/bg.gif) repeat center 36px;
        text-align: center;
        background-color: #c30230;
      }

      #content {
        margin: 0 auto;
        width: 960px;
        background: url(images/content_bg.jpg) no-repeat left top;
        height: 627px;
      }

      #content .tip1,
      #content .tip2,
      #content .tip3,
      #content .tip4,
      #content .tip5,
      #content .tip6,
      #content .tip7,
      #content .tip8 {
        position: absolute;
        width: 227px;
        left: 200px;
        top: 100px;
      }

      #content .tip1 .tip_h {
        background: url(images/tip1_h.gif) no-repeat left top;
      }

      #content .tip1 .tip_h,
      #content .tip2 .tip_h,
      #content .tip3 .tip_h,
      #content .tip4 .tip_h,
      #content .tip5 .tip_h,
      #content .tip6 .tip_h,
      #content .tip7 .tip_h,
      #content .tip8 .tip_h {
        width: 227px;
        padding-top: 45px;
        height: 23px;
        text-align: left;
        cursor: move;
      }

      #content .tip1 .tip_c {
        background: url(images/tip1_c.gif) repeat-y;
      }

      #content .tip1 .tip_c,
      #content .tip2 .tip_c,
      #content .tip3 .tip_c,
      #content .tip4 .tip_c,
      #content .tip5 .tip_c,
      #content .tip6 .tip_c,
      #content .tip7 .tip_c,
      #content .tip8 .tip_c {
        width: 200px;
        padding-left: 12px;
        padding-right: 15px;
        min-height: 40px;
        text-align: left;
        line-height: 20px;
        max-height: 160px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
      }

      #content .tip1 .tip_f {
        background: url(images/tip1_f.gif) no-repeat left top;
      }

      #content .tip1 .tip_f,
      #content .tip2 .tip_f,
      #content .tip3 .tip_f,
      #content .tip4 .tip_f,
      #content .tip5 .tip_f,
      #content .tip6 .tip_f,
      #content .tip7 .tip_f,
      #content .tip8 .tip_f {
        width: 227px;
        height: 53px;
        padding-top: 20px;
      }

      #content .close,
      #content .close2 {
        float: left;
        font-size: 12px;
        cursor: pointer;
        color: #000000;
      }

      .clr {
        clear: both;
        overflow: auto;
        display: block;
        height: 0px;
      }

      #content .icon {
        float: left;
        width: 35px;
        padding-left: 15px;
        height: 35px;
        text-align: center;
      }

      #content .name {
        float: right;
        padding-right: 15px;
        text-align: right;
        font-size: 14px;
        line-height: 35px;
        color: #c0f;
      }

      #content .num {
        float: left;
        padding-left: 7px;
        width: 195px;
      }

      #count {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        color: #222;
      }

      #comment {
        padding: 20px;
        box-sizing: border-box;
        height: 180px;
        margin-top: 20px;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        padding: 16px;
        background: #f8f8f8;
        pointer-events: none;
      }

      #comment textarea {
        display: block;
        border: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        max-height: 72px;
        width: 100%;
        height: 150px;
        font-size: 16px;
        line-height: 24px;
        color: #222;
        outline: none;
        resize: none;
        background: #f8f8f8;
        -webkit-transition: height 0.3s ease-in-out;
        -moz-transition: height 0.3s ease-in-out;
        transition: height 0.3s ease-in-out;
      }

      #comment button {
        border: none;
        border-radius: 4px;
        padding: 6px 18px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #fff;
        background: hotpink;
        cursor: pointer;
        outline: none;
      }

      #comment button:hover {
        background: deeppink;
      }

      #comment-box {
        width: 960px;
        margin: 0 auto;
        background: #fff;
      }

      .action {
        text-align: right;
      }

      #count {
        text-align: left;
        margin-bottom: 10px;
      }

      #canvas {
        display: block;
        position: fixed;
        margin: 0px;
        padding: 0px;
        border: 0px;
        outline: 0px;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    </style>
  </head>

  <body>
    <div id="content">
      <div class="tip1" id="cc">
        <div class="tip_h" title="双击关闭纸条">
          <div class="num">第[49]条 2022-02-17 22:51:52</div>
          <div class="close" title="关闭纸条">×</div>
          <div class="clr"></div>
        </div>
        <div class="tip_c">希望马上赚2个亿</div>
        <div class="tip_f">
          <div class="icon">
            <img src="images/bpic_1.gif" alt="" title="" />
          </div>
          <div class="name">成真的人</div>
          <div class="clr"></div>
        </div>
      </div>
    </div>
    <div id="comment-box">
      <div id="comment">
        <div id="count">
          <b>评论:0</b>
        </div>
        <div id="ipt">
          <textarea
            placeholder="说点什么吧..."
            resize="none"
            name=""
            id="test"
            cols="30"
            rows="10"
          ></textarea>
          <div class="action">
            <button id="submit">发送评论</button>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
